<template>
<!-- 登录 -->
	<div id="hello"  :style="{minHeight: currHeight + 'px'}">
		<!-- 头部导航条 -->
		<van-nav-bar title="比郎" left-text="返回" left-arrow
		     @click-left="onClickLeft"
		     @click-right="onClickRight"
		>
		<template #right>
		    <van-icon name="ellipsis" size="18" />
		</template>
		</van-nav-bar>
		<!-- LOGE -->
		<div class="loge">
			<img src="../assets/images/注册/logo.png">
		</div>
		<!-- 登陆 -->
		<div class="land"> 
			<!-- 账号 -->
			<div class="cell">
				<img class="photo" src="../assets/images/注册/login_icon_1.png">
				<img class="line" src="../assets/images/登录/border.png">
				<input class="phone" type="text" placeholder="请输入手机号码">
			</div>
			<!-- 密码 -->
			<div class="cipher">
				<img class="photo" src="../assets/images/注册/login_icon_3.png">
				<img class="line" src="../assets/images/登录/border.png">
				<input class="phone" type="password" placeholder="请输入密码">
				<div class="forget">忘记密码？</div>
			</div>
		</div>
		<!-- 按钮 -->
		<router-link to="/">
			<div class="log_in">
				登录
			</div>
		</router-link>
		<router-link to="/News">
			<div class="register">
			注册账号
			<img src="../assets/images/我的尺寸/icon.png">
			</div>
		</router-link>
		<!-- 第三方登陆 -->
		<div class="three">
			<img src="../assets/images/注册/border.png">
			<div>第三方登陆</div>
			<img src="../assets/images/注册/border.png">
		</div>
		<div class="wx">
			<img src="../assets/images/登录/登录54_11.png">
			<div>微信登陆</div>
		</div>

	</div>
</template>

<script>
	export default {
		data () {
		  return {
		      currHeight: '',
			  }
		  },
	  methods: {
    onClickLeft() {
      
      this.$router.go(-1)
    },
    onClickRight() {
      
    },
  },
  mounted(){
      this.currHeight = document.documentElement.clientHeight
      window.onresize = () => {
          this.currHeight = document.documentElement.clientHeight
      }
  }
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	// loge
	.loge {
		width: 81.33%;
		margin: 0 auto;
		margin-top: 12%;
		box-sizing: border-box;
		padding-left: 49px;
		padding-right: 49px;

		img {
			width: 100%;
		}
	}

	// 登陆
	.land {
		width: 81.33%;
		margin: 0 auto;
		margin-top: 11.39%;
	}

	// 账号
	.cell {
		width: 100%;
		height: 100px;
		box-sizing: border-box;
		padding-left: 5.41%;
		box-sizing: border-box;
		background: #F3F4F6;

		.photo {
			width: 30px;
			// height: 48px;
			border-radius: 50%;
			margin-right: 4.4%;
		}

		.line {
			height: 70%;
		}

		.phone {
			font-size: 24px;
			font-family: HiraginoSansGB;
			font-weight: normal;
			color: #BBBBBB;
			background: rgba(0, 0, 0, 0);
			border: none;
			outline: none;
			box-sizing: border-box;
			padding-left: 10px;
		}
	}

	// 密码
	.cipher {
		width: 100%;
		height: 100px;
		margin-top: 10px;
		box-sizing: border-box;
		padding-left: 5.41%;
		box-sizing: border-box;
		background: #F3F4F6;
		position: relative;

		.forget {
			position: absolute;
			right: 5%;
			font-size: 24px;
			font-family: HiraginoSansGB;
			font-weight: normal;
			color: #666666;
			top: 30%;
		}

		.photo {
			width: 30px;
			// height: 48px;
			border-radius: 50%;
			margin-right: 4.4%;
		}

		.line {
			height: 70%;
		}

		.phone {
			font-size: 24px;
			font-family: HiraginoSansGB;
			font-weight: normal;
			color: #BBBBBB;
			background: rgba(0, 0, 0, 0);
			border: none;
			outline: none;
			box-sizing: border-box;
			padding-left: 10px;
		}
	}

	// 登陆
	.log_in {
		width: 81.33%;
		height: 100px;
		line-height: 100px;
		margin: 0 auto;
		margin-top: 15%;
		box-sizing: border-box;
		border-radius: 8px;
		background: #234497;
		color: white;
		text-align: center;
		font-size: 30px;
		font-family: HiraginoSansGB;
		font-weight: normal;
	}

	// 注册
	.register {
		position: relative;
		width: 81.33%;
		height: 100px;
		line-height: 100px;
		margin: 0 auto;
		margin-top: 8%;
		box-sizing: border-box;
		border-radius: 8px;
		background: #bfc0c1;
		color: white;
		text-align: center;
		font-size: 30px;
		font-family: HiraginoSansGB;
		font-weight: normal;

		img {
			position: absolute;
			top: 35%;
			right: 5%;
			width: 35px;
		}
	}

	// 第三方登陆
	.three {
		width: 81.33%;
		margin: 0 auto;
		margin-top: 10%;
		margin-bottom: 5%;
		box-sizing: border-box;
		padding-left: 49px;
		padding-right: 49px;
		display: flex;
		justify-content: space-around;

		img {
			margin-top: 4%;
			height: 2px;
			width: 27%;
		}

		div {
			font-size: 20px;
			font-family: HiraginoSansGB;
			font-weight: normal;
			color: #666666;
		}
	}

	.wx {
		width: 81.33%;
		height: 100px;
		margin: 0 auto;
		background: #FFFFFF;
		border: 1px solid #E1E1E1;
		border-radius: 10px;

		img {
			width: 50px;
			margin: 0 auto;
			float: left;
			margin-left: 30%;
			margin-top: 15px;
			margin-right: 5%;
		}

		div {
			float: left;
			margin-top: 15px;
			height: 23px;
			font-size: 24px;
			font-family: HiraginoSansGB;
			font-weight: normal;
			color: #333333;
		}
	}
</style>
